<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 
    利用position可以对元素进行定位，常用取值有5个:
    static | relative | absolute | sticky | fixed
    默认值:
    口 static:默认值静态定位   top left bottom right 无效
    使用下面的值可以让元素变成 定位元素(positioned element)
    口 relative: 相对定位
    口absolute: 绝对定位
    口fixed: 固定定位
    口 sticky: 粘性定位
    */
 
    .box{
        display: inline-block;

    }
    .text{
        position: relative;
        top:30px;
        left: 50px;
    }
    img{
        width: 300px;
        height: 300px;
    }
       /* 相对定位
    
    元素按照normal flow布局

    可以通过left、right、top、bottom进行定位
    口 定位参照对象是元素自己原来的位置left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    相对定位的应用场景
    口在不影响其他元素位置的前提下，对当前元素位置进行微调
    */
    .pf{
        font-size: 8px;
        position: relative;
        bottom: 6px;
        right: 5px;
    }
    /* 固定定位 - fixed
    元素脱离normal flow(脱离标准流、脱标)
    
    可以通过left、right、 top、bottom进行定位
    定位参照对象是视口(viewport)

    当画布滚动时，固定不动
    */
    .text01{
        position: fixed;
        right: 0;
        top: 30px;
    }
    .btn{
        padding: 10px;
        position: fixed;
        right: 10px;
        bottom: 10px;
    }
    .btn button{
        height: 30px;
        margin-bottom: 10px;
        background-color: cornflowerblue;
        border: none;
        color: #333;
        border-radius: 8px;
        width: 50px;
    }
    /* 绝对定位
    元素脱离normal flow (脱离标准流、脱标)
    可以通过left、right、top、bottom进行定位
        口定位参照对象是最邻近的定位祖先元素
        口 如果找不到这样的祖先元素，参照对象是视口

    定位元素(positioned element)
    口 position值不为static的元素
    口也就是position值为relative、absolute、fixed的元素

    position绝对定位元素的特点

    可以随意设置宽高

    宽高默认由内容决定

    不再受标准流的约束
    口 不再严格按照从上到下、从左到右排布
    口 不再严格区分块级、行内级，块级、行内极的很多特性都会消失

    不再给父元素汇报宽高数据

    脱标元素内部默认还是按照标准流布局


    绝对定位元element
    口 position值为absolute或者fixed的元素
    
    对于绝对定位元素来说
    口定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    口定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
    如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left: 0、 right: 0.top: 0、 bottom: 0. fmargin:0
    口 另外，还得设置具体的宽高值 (宽高小于定位参照对象的宽高)
    */
    .text02{
        position: absolute;
        top:0;
        right: 0;
    }
    .container{
        position: relative;
        width: 1000px;
        height: 800px;
        background-color: #f00;
    }
    .box_2{
        position: relative;
        width: 800px;
        height: 600px;
        background-color: #0f0;

    }
    /* 粘性定位
    还有一个定位的值是position: sticky，比起其他定位值要新一些
        口sticky是一个大家期待已久的属性
        口 可以看做是相对定位和固定(绝对)定位的结合体,
        口 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阀值点;
        口 当达到这个阀值点时,就会变成固定(绝对)定位
    
    sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport)
    */
    .nav{
        background-color: #f00;
        color: #fff;
        /* position: relative;
        top: 0;
        left:0;
        right: 0; */
        position: sticky;
        top: 0;
    }
  </style>
  <body>
    <!-- <div>div元素</div>
    <span>span元素</span>
    <strong class="text">strong文本</strong>
    <img src="../imgs/bird.png" alt="" srcset="">
    <div class="box">23</div> -->
    <div>----------相对定位----------</div>
    <div>
        3 <span class="pf">2</span>+2 = 11
    </div>
    <div>----------固定定位----------</div>
    <div>
        <span>我是span元素</span>
        <strong class="text01">strong文本222222</strong>
        <img src="../imgs/bird.png" alt="" srcset="">
        <div>我是div元素</div>
        <div class="btn">
            <div>
                <button>顶部</button>
            </div>
            <div>
                <button>反馈</button>
            </div>
        </div>
    </div>
    <div>----------绝对定位----------</div>
    <div class="container">
        <div class="box_2">
            <span>我是span元素</span>
            <strong class="text02">strong文本绝对定位</strong>
            <img src="../imgs/bird.png" alt="" srcset="">
            <div>我是div元素</div>
        </div>
    </div>
    <div>----------粘性定位----------</div>
    <div class="container2">
        <h1>我是标题</h1>
        <div class="nav">
            <span>电脑</span>
            <span>手机</span>
            <span>衣服</span>
            <span>鞋子</span>
        </div>
        <ul>
            <li>我是列表1</li>
            <li>我是列表2</li>
            <li>我是列表3</li>
            <li>我是列表4</li>
            <li>我是列表5</li>
            <li>我是列表6</li>
            <li>我是列表7</li>
            <li>我是列表8</li>
            <li>我是列表9</li>
            <li>我是列表10</li>
            <li>我是列表11</li>
            <li>我是列表12</li>
            <li>我是列表13</li>
            <li>我是列表14</li>
            <li>我是列表15</li>
            <li>我是列表16</li>
            <li>我是列表17</li>
            <li>我是列表18</li>
            <li>我是列表19</li>
            <li>我是列表20</li>
            <li>我是列表21</li>
            <li>我是列表22</li>
            <li>我是列表23</li>
            <li>我是列表24</li>
            <li>我是列表25</li>
            <li>我是列表26</li>
            <li>我是列表27</li>
            <li>我是列表28</li>
            <li>我是列表29</li>
            <li>我是列表30</li>
            <li>我是列表31</li>
            <li>我是列表32</li>
            <li>我是列表33</li>
            <li>我是列表34</li>
            <li>我是列表35</li>
            <li>我是列表36</li>
            <li>我是列表37</li>
            <li>我是列表38</li>
            <li>我是列表39</li>
            <li>我是列表40</li>
            <li>我是列表41</li>
            <li>我是列表42</li>
            <li>我是列表43</li>
            <li>我是列表44</li>
            <li>我是列表45</li>
            <li>我是列表46</li>
            <li>我是列表47</li>
            <li>我是列表48</li>
            <li>我是列表49</li>
            <li>我是列表50</li>
            <li>我是列表51</li>
            <li>我是列表52</li>
            <li>我是列表53</li>
            <li>我是列表54</li>
            <li>我是列表55</li>
            <li>我是列表56</li>
            <li>我是列表57</li>
            <li>我是列表58</li>
            <li>我是列表59</li>
            <li>我是列表60</li>
            <li>我是列表61</li>
            <li>我是列表62</li>
            <li>我是列表63</li>
            <li>我是列表64</li>
            <li>我是列表65</li>
            <li>我是列表66</li>
            <li>我是列表67</li>
            <li>我是列表68</li>
            <li>我是列表69</li>
            <li>我是列表70</li>
            <li>我是列表71</li>
            <li>我是列表72</li>
            <li>我是列表73</li>
            <li>我是列表74</li>
            <li>我是列表75</li>
            <li>我是列表76</li>
            <li>我是列表77</li>
            <li>我是列表78</li>
            <li>我是列表79</li>
            <li>我是列表80</li>
            <li>我是列表81</li>
            <li>我是列表82</li>
            <li>我是列表83</li>
            <li>我是列表84</li>
            <li>我是列表85</li>
            <li>我是列表86</li>
            <li>我是列表87</li>
            <li>我是列表88</li>
            <li>我是列表89</li>
            <li>我是列表90</li>
            <li>我是列表91</li>
            <li>我是列表92</li>
            <li>我是列表93</li>
            <li>我是列表94</li>
            <li>我是列表95</li>
            <li>我是列表96</li>
            <li>我是列表97</li>
            <li>我是列表98</li>
            <li>我是列表99</li>
            <li>我是列表100</li>
        </ul>
    </div>
  </body>
</html>
